<script setup>
import { gameStateStore } from '@/stores'
import { watch } from 'vue'
const gameStateStore1 = gameStateStore()
watch(
  () => gameStateStore1?.gameState,
  (newV) => {
    console.log('来到contentMain')
    const mouseElements = document.querySelectorAll('.mouse')
    if (newV) {
      mouseElements.forEach((item) => {
        console.log(item)
        item.style.display = 'none'
      })
    } else {
      mouseElements.forEach((item) => {
        console.log(item)
        item.style.display = 'block'
      })
    }
  },
)
</script>
<template>
  <div class="content-main">
    <div class="content-gezi">
      <div class="mouse"></div>
      <div class="hole"></div>
    </div>
    <div class="content-gezi">
      <div class="mouse"></div>
      <div class="hole"></div>
    </div>
    <div class="content-gezi">
      <div class="mouse"></div>
      <div class="hole"></div>
    </div>
    <div class="content-gezi">
      <div class="mouse"></div>
      <div class="hole"></div>
    </div>
    <div class="content-gezi">
      <div class="mouse"></div>
      <div class="hole"></div>
    </div>
    <div class="content-gezi">
      <div class="mouse"></div>
      <div class="hole"></div>
    </div>
    <div class="content-gezi">
      <div class="mouse"></div>
      <div class="hole"></div>
    </div>
    <div class="content-gezi">
      <div class="mouse"></div>
      <div class="hole"></div>
    </div>
    <div class="content-gezi">
      <div class="mouse"></div>
      <div class="hole"></div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.content-main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px 20px;
  margin: 19% 20%;
  width: calc(60vw);
  height: calc(60vh - 200px);
  .content-gezi {
    position: relative;
    .mouse {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 10px;
      background: url('@/assets/mouse.png') no-repeat center center;
      background-size: contain;
      animation: bounce 1s infinite alternate;
    }
    @keyframes bounce {
      from {
        top: 0;
      }
      to {
        top: -20px;
      }
    }
    .hole {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 30px;
      left: 0;
      background: url('@/assets/hole.jpg') no-repeat center center;
      background-size: contain;
    }
  }
}
</style>
